<template>

    <SwiperBtn @add-swiper="onAddSwiper" @batch-remove="onBatchRemove"/>

    <Table border :columns="columns" :data="data" @on-selection-change="selection = $event">
        
        <template #status="{ row, index }">
            <DotTag type="primary" v-if="row.state">正常</DotTag>
            <DotTag type="error" v-else>失效</DotTag>
        </template>


        <template #url="{ row, index }">
            <Image :src="row.url" fit="contain" width="80px" height="60px"  :initial-index="0" />
        </template>

        <template #action="{ row, index }">
            <Button type="primary" icon="ios-create-outline" size="small" style="margin-right: 5px" @click="editSwiper(row)">修改</Button>
            <Button type="error" icon="ios-remove-circle-outline" size="small" @click="remove(row, index)">移除</Button>
        </template>

    </Table>

    <SwiperForm v-model="drawer.state" v-if="drawer.state" :title="drawer.title" :row="drawer.row" />

</template>

<script setup>
import {ref, reactive} from 'vue' ;
import DotTag from '@/components/DotTag.vue' ;
import SwiperBtn from '@/components/advert/SwiperBtn.vue' ;
import SwiperForm from '@/components/advert/SwiperForm.vue';
import Tips from '@/message'; 

const drawer = ref({title: "", state: false, row: {}});

const columns = reactive([
    {
        type: "selection" ,
        width: 60 
    },
    {
        title: "系统名" ,
        key: "sysName" ,
        width: 240,
    },
    {
        title: "系统编号" ,
        key: "remark" ,
        width: 150,
    },
    {
        title: "轮播图" ,
        slot: "url" ,
        width: 120,
    },
    {
        title: "链接地址" ,
        key: "linkUrl" , 
    },
    {
        title: "状态" ,
        slot: "status" ,
        align: "center",
        width: 100,
    },
    {
        title: "操作" ,
        align: "center",
        slot: "action" ,
        width: 180, 
    },
]) ;

// 要修改 data, 可以通过 data.value = ...
const data = ref(reactive([
    {id:1 , sysName: "爱下载资源分享平台管理系统", sysId: 2,  remark: "love-down", url: 'https://file.iviewui.com/images/image-demo-1.jpg', linkUrl: 'https://file.iviewui.com/', state: true, createTime: "2023-07-22 11:22:33"} ,
    {id:2 , sysName: "爱下载资源分享平台管理系统",  sysId: 2,remark: "love-down", url: 'https://file.iviewui.com/images/image-demo-2.jpg', linkUrl: 'https://file.iviewui.com/', state: true, createTime: "2023-07-22 11:22:33"} ,
    {id:3 , sysName: "积分商城管理系统",  sysId: 3, remark: "score-commerce", url: 'https://file.iviewui.com/images/image-demo-3.jpg', linkUrl: 'https://file.iviewui.com/', state: true, createTime: "2023-07-22 11:22:33"} ,
    {id:4 , sysName: "爱下载资源分享平台管理系统",  sysId: 2,remark: "love-down", url: 'https://file.iviewui.com/images/image-demo-4.jpg', linkUrl: 'https://file.iviewui.com/', state: true, createTime: "2023-07-22 11:22:33"} ,

])) ;

// 定义一个数据、存储复选框选中的所有元素
const selection = ref([]) ; 

// 添加轮播图
function onAddSwiper() {
    drawer.value.title = "添加轮播图" ;
    drawer.value.state = true ;
    drawer.value.row = {state: true, url: "", linkUrl: "", sysId: null} ;
}
// 批量删除
function onBatchRemove() {
    if (selection.value.length == 0) {
        Tips.warning("请至少选择一个需要删除的轮播图数据");
        return ;
    }
    // 获取要删除的所有ID 数据
    let ids = selection.value.map(s => s.id);
    console.log(ids); // 删除
    Tips.success("批量删除成功");
}

// 修改
function editSwiper(row) {
    drawer.value.title = "修改轮播图" ;
    drawer.value.state = true ;
    drawer.value.row = {...row} ;
}

// 删除
function remove(row, index) {
    Tips.confirm("您确定要删除该轮播图吗?").then(()=> {
        data.value.splice(index, 1);
    })
}

</script>